import { Pressable, StyleSheet, View, Text } from 'react-native';
import React, { useState } from 'react';
import { useNavigation, useRoute } from '@react-navigation/native';
import { TabView, TabBar } from 'react-native-tab-view';
import { useTranslation } from 'react-i18next';
import { px2dp, scale, width } from '~/utils/px2dp';
import { NavBarHeader } from '~/components';
import CourseList from './CourseList';
import MyCourse from './MyCourse';

export default function HealthManagement() {
    const router = useRoute<any>();
    const { t } = useTranslation();
    const navigation: any = useNavigation();
    const { type, device_sn, subDevice_sn, device_code, pupillus_mobile } = router.params || {};
    const [index, setIndex] = useState(0);
    const [routes] = useState([
        { key: 'first', title: t('HealthManagement.t2') },
        { key: 'second', title: t('HealthManagement.t3') },
    ]);
    const renderScene = ({ route }) => {
        switch (route.key) {
            case 'first':
                return (
                    <MyCourse
                        tableIndex={index}
                        type={type}
                        subDevice_sn={subDevice_sn}
                        device_sn={device_sn}
                        pupillus_mobile={pupillus_mobile}
                    />
                );
            case 'second':
                return <CourseList type={type} subDevice_sn={subDevice_sn} pupillus_mobile={pupillus_mobile} />;
            default:
                return null;
        }
    };

    return (
        <View style={styles.container}>
            <NavBarHeader
                title={t('HealthManagement.title')}
                rightComponent={
                    <Pressable
                        style={{ marginRight: px2dp(32) }}
                        onPress={() => navigation.navigate('CourseHistory', { device_sn: subDevice_sn })}>
                        <Text style={{ color: '#1877FF' }}>{t('HealthManagement.t1')}</Text>
                    </Pressable>
                }
            />
            <TabView
                lazy={true}
                navigationState={{ index, routes }}
                renderScene={renderScene}
                onIndexChange={setIndex}
                initialLayout={{ width: width }}
                renderTabBar={(props) => (
                    <TabBar
                        {...props}
                        pressColor="#fff"
                        indicatorStyle={{
                            backgroundColor: '#1877FF',
                            width: 60,
                            left: (width / 2 - 60) / 2,
                        }}
                        style={{ backgroundColor: '#fff' }}
                        activeColor="#1877FF"
                        inactiveColor="gray"
                        labelStyle={{ fontSize: scale(30) }}
                    />
                )}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});
